<template>
    <PageTabelLayout>
        <template #pageHeader>
            <div class="my-header" v-if="headerShow">
                <a-form size="small" :model="searchData" auto-label-width layout="inline">
                    <a-form-item label-col-flex="80px" label="客户名称">
                        <a-input class="bacClass" style="width: 200px;" allow-clear v-model="searchData.customName" />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" label="色号">
                        <a-input class="bacClass" style="width: 228px;" allow-clear v-model="searchData.colorCode" />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" label="色称">
                        <a-input class="bacClass" style="width: 228px;" allow-clear v-model="searchData.colorName" />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" label="计划单号">
                        <a-input class="bacClass" style="width: 200px;" allow-clear disabled />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" label="流转卡号">
                        <a-input class="bacClass" style="width: 200px;" allow-clear v-model="searchData.flowCardCode" />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" label="客户订单号">
                        <a-input class="bacClass" style="width: 186px;" allow-clear
                            v-model="searchData.clientPlanOrderCode" />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" label="设备编号">
                        <a-input class="bacClass" style="width: 200px;" allow-clear v-model="searchData.machineCode" />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" label="生产车间">
                        <a-input class="bacClass" style="width: 200px;" allow-clear disabled />
                    </a-form-item>
                    <a-checkbox value="1">配方单</a-checkbox>
                </a-form>
            </div>
            <a-divider orientation="center">
                <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
                <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
            </a-divider>
            <div class="my-tool-bar" style="padding-bottom: 10px;">
                <Toolbar :items="['查询']" @select="selectHandler" />
            </div>
        </template>
        <template #pageTabel>
            <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                @grid-ready="gridReady" style="height: 100%;" class='ag-theme-alpine' :defaultColDef="defaultColDef"
                :rowData="table.dataList" :columnDefs="cfsValue" :localeText="localeTextData" @columnResized="onColumnResized"
                    @columnMoved="onColumnMoved"></AgGridVuesCopys>
            </a-spin>
        </template>
        <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size @change="changePage"
            @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
            :page-size="pagination.pageSize" :current="pagination.page" />
        <a-modal :visible="pageData.showSpeedOver" :footer="false" unmountOnClose @cancel="pageData.showSpeedOver = false">
            <template #title> 工序完成情况 </template>
            <div class="toFlex">
                <div class="pGreen">配坯</div> <a-divider style="width: 20px !important;margin:0px 5px" :size="2" />
                <div class="pGreen">松布</div> <a-divider style="width: 20px !important;margin:0px 5px" :size="2" />
                <div class="pGreen">染色</div> <a-divider style="width: 20px !important;margin:0px 5px" :size="2" />
                <div class="pGreen">湿布</div> <a-divider style="width: 20px !important;margin:0px 5px" :size="2" />
                <div class="pGreen">开幅</div> <a-divider style="width: 20px !important;margin:0px 5px" :size="2" />
                <div class="pGreen">定型</div> <a-divider style="width: 20px !important;margin:0px 5px" :size="2" />
                <div class="pGreen">成品检验</div>
            </div>
            <div class="toFlex" style="margin-top: 20px;justify-content: center;">
                <p class="pGreen">绿色为完成</p>
                <p class="pRed" style="margin:0px 20px">红色为未完成</p>
                <p class="pYellow">黄色为正在做</p>
            </div>
        </a-modal>
    </PageTabelLayout>
</template>

<script  lang="ts">
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { ref, reactive, onMounted } from 'vue';

import { localeText } from '@/api/aggridZw'
import emitter from '@/hooks/useEventBus'
import { usePagination, useTable } from '@/hooks/table';
import { vatExhaut } from '@/api/DyeingshopManagement/DyeVatSchedu'
import { pagingList } from "@/api/paging";
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'

export default {
    name: "unCylinderInfo",
    setup() {
        let vatExhautApi = vatExhaut();
        let headerShow = ref<boolean>(true);
        let changHeadShow = (boolVal: boolean) => {
            headerShow.value = boolVal;
            emitter.emit('window-change');
        };
        const searchData = reactive<{
            colorCode: string;
            flowCardCode: string;
            customName: string;
            colorName: string;
            machineCode: string;
            clientPlanOrderCode: string;
        }>({
            colorCode: '',
            flowCardCode: '',
            customName: '',
            colorName: '',
            machineCode: '',
            clientPlanOrderCode: ''
        });
        emitter.on("refresh-unCylinderInfo", () => {
            selectHandler()
        });
        const doRefresh = async () => {
            pageData.pageLoading = true;
            // updateGridState01()
            await vatExhautApi.getFindNoArrage({
                page: pagination.page,
                limit: pagination.pageSize,
            }, {
                ...searchData
            }).then(({ data: { data }, code }: any) => {
                if (code === 200) {
                    // gridOption.value.sizeColumnsToFit();
                    table.handleSuccess(data.list);
                    gridOption.value.setRowData(data.list);
                    total.value = data.total;
                }
            })
                .catch(console.log)
                .finally(() => {
                    pageData.pageLoading = false;
                });
        };
        const selectHandler = () => {
            pagination.page = 1;
            doRefresh();
        };
        const gridOption = ref();
        const colState = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api
            colState.value = params.columnApi
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            // flex: 1,
            width: 150,
        }
        const pageData = reactive<{
            showSpeedOver: boolean,
            pageLoading: boolean,
        }>({
            showSpeedOver: false,
            pageLoading: false
        });
        const cfsValue = [
            // {
            //     headerName: '序号',
            //     field: 'recordDate',
            // },
            {
                headerName: '设备编号',
                field: 'machineCode',
            },
            {
                headerName: '缸型',
                field: 'cylinderType',
            },
            {
                headerName: '客户名称',
                field: 'customName',
            },
            {
                headerName: '布名',
                field: 'speedType',
            },
            {
                headerName: '品名',
                field: 'productName',
            },
            {
                headerName: '色号',
                field: 'colorCode',
            },
            {
                headerName: '色称',
                field: 'colorName',
            },
            {
                headerName: '颜色深浅',
                field: 'colorDepth',
            },
            {
                headerName: '匹数',
                field: 'houseNum',
            },
            {
                headerName: '重量',
                field: 'orderWeight',
            },
            {
                headerName: '作业类型',
                field: 'yarnNumber',
            },
            {
                headerName: '回修原因',
                field: 'repairReason',
            },
            {
                headerName: '计划单号',
                field: 'planOrderCode',
            },
            {
                headerName: '开单日期',
                field: 'createOrderDate',
            },
            {
                headerName: '客户订单号',
                field: 'clientPlanOrderCode',
            },
            {
                headerName: '确认色',
                field: 'affirmColor',
            },
            {
                headerName: '工序完成情况',
                field: 'createName',
            },
            {
                headerName: '订单号',
                field: 'createTime',
            },
            {
                headerName: '生产交日期',
                field: 'updateName',
            },
            {
                headerName: '是否有配方单',
                field: 'updateTime',
            },
            {
                headerName: '加工类型',
                field: 'updateTime',
            },
            {
                headerName: '色样要求',
                field: 'updateTime',
            },
            {
                headerName: '流转卡类型',
                field: 'updateTime',
            },
            {
                headerName: '出库日期',
                field: 'updateTime',
            },
            {
                headerName: '毛坯出库状态',
                field: 'updateTime',
            },
            {
                headerName: '备注',
                field: 'updateTime',
            },
            {
                headerName: '操作',
                field: 'action',
                resizable: false,
                filter: false,
                sortable: false,
                lockPosition: 'right',
                width: '100',
                pinned: 'right',
                cellRenderer: {
                    template: `<a-tag color="#30be16" @click="a" class="gesture">工序完成情况</a-tag>`,
                    setup(props: any) {
                        const a = () => {
                            lookOverHandler(props.params.data)
                        }
                        return {
                            a
                        }
                    }
                },
            },
        ];
        const total = ref(10);
        const changePage = (val: any) => {
            pagination.page = val
            doRefresh();
        }
        const changeSize = (val: any) => {
            pagination.pageSize = val
            doRefresh();
        }
        const pagination = usePagination(doRefresh);
        const localeTextData: any = ref(localeText);
        const table = useTable();
        const lookOverHandler = async (record: any) => {
            // console.log(record);
            // let data = { 
            //     flowCardCode:record.flowCardCode,
            //     customName:record.customName,
            //     colorCode:record.colorCode,
            //     colorName:record.colorName,
            //     machineCard:record.machineCode,
            // }
            // let res = await vatExhautApi.checkProcessOver({...data});
            // console.log(res);
            // if(res.code === 200){
            //     // console.log()
            // }
        }
        const pagingList1: any = ref(pagingList)
        const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('unCylinderInfo01', gridOption, colState, cfsValue)
        const onColumnMoved = () => {
            saveGridState01()
        }
        const onColumnResized = () => {
            saveGridState01()
        }
        return {
            saveOrUpdateGridState01,
            saveGridState01,
            updateGridState01,
            onColumnMoved,
            onColumnResized,
            colState,
            pagingList1,
            selectHandler,
            headerShow,
            searchData,
            changHeadShow,
            pageData,
            gridReady,
            defaultColDef,
            total,
            changePage,
            changeSize,
            pagination,
            localeTextData,
            table,
            cfsValue
        }
    },
    components: { PageTabelLayout,  }
}
</script>

<style scoped>
.main-container {
    height: 100%;
}

.arco-drawer-header .arco-drawer-title {
    width: 100%;
}

.aInput {
    background: #fff;
    width: 270px;
    border: 1px solid #c9cdd3;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.aInputLine {
    border: 1px solid #c9cdd3;
    background: #fff;
}

.pGreen {
    color: green
}

.pRed {
    color: red
}

.pYellow {
    color: rgb(221, 221, 47)
}


.toFlex {
    display: flex;
    align-items: center;
}
</style>